$themes: (default: (g--el-menu-item-height : 56px,
      g--el-menu-item-font-size:14px,
      g--el-menu-text-color:#fff,
      g--el-menu-base-level-padding:20px,
      g--el-menu-bg-color: #fff,
      g--el-menu-hover-bg-color: #fff,
      g--el-menu-active-color: #6196f3,
      g--el-color-primary: #6196f3,
      g--el-text-color-primary:#6196f3,
      g--el-color-primary-light-9:rgba(0, 0, 0, .3),
      g--el-menu-active-color: var(g--el-color-primary),
      g--el-menu-text-color: var(g--el-text-color-primary),
      g--el-menu-hover-text-color: var(g--el-color-primary),
      g--el-menu-bg-color: var(g--el-fill-color-blank),
      g--el-menu-hover-bg-color: var(g--el-color-primary-light-9),
      g--el-menu-item-height: 56px,
      g--el-menu-sub-item-height: calc(var(g--el-menu-item-height) - 6px),
      g--el-menu-horizontal-height: 60px,
      g--el-menu-horizontal-sub-item-height: 36px,
      g--el-menu-item-font-size: var(g--el-font-size-base),
      g--el-menu-item-hover-fill: var(g--el-color-primary-light-9),
      g--el-menu-border-color: var(g--el-border-color),
      g--el-menu-base-level-padding: 20px,
      g--el-menu-level-padding: 40px,
      g--el-menu-icon-width: 24px,
   ),
);
$theme-map: ();

@mixin themeify() {

   @each $theme-name,
   $map in $themes {
      $theme-map: $map !global;

      [data-theme="#{$theme-name}"] & {
         @content;
      }
   }
}

@function themed($key) {
   @return map-get($theme-map, $key);
}

// 设置公共主题色
@mixin set-themes-css-var() {

   @each $theme-name,
   $map in $themes {
      [data-theme="#{$theme-name}"] {

         @each $key,
         $value in $map {
            --#{$key}: #{$value};
         }
      }
   }
}